import React, { memo, useState } from 'react'
import { videoPlaySpeed, videoRefs } from '../../store'
import { useRecoilValue, useRecoilState } from 'recoil'
import styles from './index.module.scss'
import { useMemo } from 'react'
import cm from 'classnames'
import Button from '@c/button'
import { userInfo } from '@/store'
import { useVipDialog, useShowLogin } from '@/utils/hooks'
import { vodActionExport, openPayModalReport } from '@/utils/report'

const multipleList = [
  { id: 0.5, name: '0.5X' },
  { id: 0.75, name: '0.75X' },
  { id: 1.0, name: '1.0X' },
  { id: 1.25, name: '1.25X' },
  { id: 1.5, name: '1.5X' },
  { id: 2.0, name: '2.0X' }
]
const multipleListPhone = [...multipleList].reverse()
const Index = () => {
  const showLog = useShowLogin()
  const user = useRecoilValue(userInfo)
  const showVipDialog = useVipDialog()
  const [multiple, setMultiple] = useRecoilState(videoPlaySpeed)
  const [isShow, setIsShow] = useState(false)
  const { videoRef } = useRecoilValue(videoRefs)
  const multipleText = useMemo(() => {
    return multipleList.filter(item => item.id === multiple)[0].name
  }, [multiple])

  // 设置视频倍数
  const selectPlayRate = playbackRate => {
    videoRef.playbackRate = playbackRate
    setMultiple(playbackRate)
  }

  //选择倍数
  const selectSpeed = (e, item) => {
    const isLogin = localStorage.getItem('token')
    e.stopPropagation()
    vodActionExport({
      speed: item.id
    })
    openPayModalReport({
      isLogin: isLogin ? 'true' : 'false',
      user_type: user?.isVip ? '会员' : '非会员'
    })
    if (item.id > 1.25) {
      if (!isLogin) {
        showLog()
        return
      }
      if (!user.isVip) {
        showVipDialog(1)
        return
      }
    }

    selectPlayRate(item.id)
    setIsShow(false)
  }

  return (
    <div
      className={styles['multifunction-multiple']}
      onMouseEnter={() => setIsShow(true)}
      onMouseLeave={() => [setIsShow(false)]}
    >
      <Button hover="scale" className={styles.multiBox}>
        <span>{multipleText}</span>
      </Button>
      <div className={styles['multifunction-multiple-container']} style={{ display: isShow ? 'block' : 'none' }}>
        <ul className={cm(styles['multifunction-multiple-layer'], 'hideWhenPhone')}>
          <p className={styles.speedTitle}>倍速</p>
          {multipleList.map((item, index) => (
            <li
              onClick={e => selectSpeed(e, item)}
              key={index}
              className={cm({
                [styles.liVip]: item.id > 1.25 && multiple !== item.id,
                [styles.liActive]: multiple === item.id
              })}
            >
              <span>{item.name}</span>
              {item.id > 1.25 ? (
                <span className={styles.vipContent}>
                  <span>VIP</span>
                </span>
              ) : null}
            </li>
          ))}
        </ul>
      </div>
      {/* 移动端适配 */}
      {isShow ? (
        <ul className={cm(styles['multiple-layer-phone'], 'hideWhenPc')} onClick={() => setIsShow(false)}>
          {multipleListPhone.map((item, index) => (
            <li
              className={item.id > 1 ? '' : styles.liHover}
              onClick={e => selectSpeed(e, item)}
              key={index}
              style={{
                color: multiple === item.id ? 'var(--theme-color)' : '#fff'
              }}
            >
              {item.id > 1 ? <span className={styles.vipContent}>VIP</span> : null}
              <span>{item.name}</span>
            </li>
          ))}
        </ul>
      ) : null}
    </div>
  )
}
export default memo(Index)
